<template>
  <div class="leftCenterLine">
    <dv-loading style="color: aqua" v-if="loading">加载中</dv-loading>
    <div ref="app" class="echarts" v-else></div>
  </div>
</template>
<script>
import * as echarts from "echarts";
// import * as requests from "./api/index";
export default {
  props: {
    itemDetial: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      xdata: [],
      ydata: [],
      loading: false,
      weekMapNumber: [],
    };
  },

  methods: {
    getrequests() {
      this.weekMapNumber = this.itemDetial.weekMapNumber || [];
      this.xdata = this.weekMapNumber.map((item) => {
        // 将日期字符串转换为Date对象
        let date = new Date(item.classDay);
        let month = date.getMonth() + 1;
        let day = date.getDate();
        return `${month}/${day}`;
      });
      this.ydata = this.weekMapNumber.map((item) => {
        return Math.round((item.classCount / 16800) * 100 || 0.0);
      });
      this.$nextTick(() => {
        this.getdata();
      });
    },
    getdata() {
      var myChart = echarts.init(this.$refs.app);
      var option;
      var timer = null;
      let datax = this.xdata;
      option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          show: false,
        },
        grid: {
          left: "3%",
          right: "5%",
          bottom: "6%",
          containLabel: true,
        },
        xAxis: {
          name: "日期",
          type: "category",
          boundaryGap: true,
          nameTextStyle: {
            color: "#a6cac9",
          },
          data: this.xdata,
          axisLabel: {
            textStyle: {
              color: "#85acef", // X轴字体颜色
              fontSize: 14, // X轴字体大小
            },
          },
        },
        yAxis: {
          name: "百分率(%)",
          type: "value",
          max: 100, //最大值
          min: 0, //最小值
          interval: 20, //间隔
          axisTick: {
            show: false,
          },
          nameTextStyle: {
            color: "#a6cac9",
          },
          axisLabel: {
            textStyle: {
              color: "#85acef",
              fontSize: 14,
            },
          },
          // splitLine: {
          //   //坐标轴在grid区域中的分割线
          //   show: false,
          // },
        },
        series: [
          {
            name: "效率",
            type: "line",
            // smooth: true,
            lineStyle: {
              color: "#00f2f1",
            },
            data: this.ydata,
            label: {
              show: true,
              position: "top",
              color: "#8E99E4",
              fontSize: 14,
              formatter: "{c}" + "%",
            },
          },
        ],
        dataZoom: [
          {
            // yAxisIndex: 0,
            show: false,
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 14, // 一次性展示五个。
          },
        ],
      };
      timer = setInterval(() => {
        let startValue = myChart.getModel().option.dataZoom[0].startValue;
        if (option.dataZoom[0].endValue == datax.length - 1) {
          option.dataZoom[0].endValue = 14;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }

        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: startValue + 1,
        });

        myChart.setOption(option, true);
      }, 60000);
      option && myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    },
  },
  mounted() {
    this.getrequests();
    setInterval(() => {
      this.getrequests();
    }, 600000);
  },
};
</script>
<style scoped>
.echarts {
  width: 850px;
  height: 400px;
}
</style>
